<template>
	<view>
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">文章详情</block>
		</nav-custom>
		<view class="news-info">
			<view class="info-tit">{{newsInfo.title}}</view>
			<view class="item-lable">
				<view class="lable-l" v-for="(items, indexs) in newsInfo.tagsArray" :index="indexs">
					<view class="iconfont icon-biaoqian"></view>
					{{items}}
				</view>
				<view class="lable-r">{{newsInfo.createTime}}</view>
			</view>
			<view class="info-cont">
				<rich-text :nodes="content"></rich-text>
			</view>
		</view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsInfo: null,
				loading: true,
				content: null
			}
		},
		onLoad(optin) {
			this.getNewsInfo(optin.id)
		},
		methods: {
			//获取商家info数据
			getNewsInfo(id) {
				this.loading = true;
				this.$api.NewsInfo(id).then(res => {
					this.newsInfo = res.data;
					let richtext = this.newsInfo.content;
					const regex = new RegExp('<img', 'gi');
					let richtext2 = richtext.replace(regex, `<img style="max-width: 100%;padding-top: 10px"`);
					const regex2 = new RegExp('<p', 'gi');
					this.content = richtext2.replace(regex2, `<p style="font-size:16px;line-height: 1.5"`);
					setTimeout(() => {
						this.loading = false;
					}, 500)
				});
			},
		}
	}
</script>

<style lang="scss">
	.news-info {
		padding: 0 30upx 30upx;

		.info-tit {
			padding: 20upx 0;
			color: #000;
			font-weight: bold;
			font-size: 36upx;
			line-height: 60upx;
		}

		.item-lable {
			height: 80upx;
			display: flex;
			align-items: center;

			.lable-l {
				height: 50upx;
				padding: 0 20upx;
				display: flex;
				border-radius: 25upx;
				align-items: center;
				font-size: 28upx;
				font-weight: bold;
				color: var(--pink);
				background-color: var(--pinkShadow);
				margin-right: 16upx;

				.iconfont {
					font-size: 28upx;
					margin-right: 10upx;
				}
			}
			
			.lable-r{
				flex: auto;
				text-align: right;
				font-size: 24upx;
				color: #999;
			}
		}
	}
</style>
